<div local-class='project-settings-collaborators'>
  <div local-class='columns'>
    <div local-class='columns-item'>
      {{#if (get @permissions 'create_collaborator')}}
        <div local-class='createForm'>
          <ProjectSettings::Collaborators::CreateForm @project={{@project}} @onCreate={{@onCreateCollaborator}} />
        </div>
      {{/if}}

      <ProjectSettings::Collaborators::List
        @permissions={{@permissions}}
        @collaborators={{@collaborators}}
        @onDelete={{@onDeleteCollaborator}}
        @onUpdate={{@onUpdateCollaborator}}
      />
    </div>

    <div local-class='columns-item rolesList'>
      <span local-class='rolesList-title'>
        {{inline-svg 'assets/tool.svg' local-class='rolesList-icon'}}
        {{t 'general.roles.OWNER'}}
      </span>
      <p local-class='rolesList-text'>
        {{t 'components.project_settings.collaborators.owner_text'}}
      </p>

      <span local-class='rolesList-title'>
        {{inline-svg 'assets/users.svg' local-class='rolesList-icon'}}
        {{t 'general.roles.ADMIN'}}
      </span>
      <p local-class='rolesList-text'>
        {{t 'components.project_settings.collaborators.admin_text'}}
      </p>

      <span local-class='rolesList-title'>
        {{inline-svg 'assets/code.svg' local-class='rolesList-icon'}}
        {{t 'general.roles.DEVELOPER'}}
      </span>
      <p local-class='rolesList-text'>
        {{t 'components.project_settings.collaborators.developer_text'}}
      </p>

      <span local-class='rolesList-title'>
        {{inline-svg 'assets/check.svg' local-class='rolesList-icon'}}
        {{t 'general.roles.REVIEWER'}}
      </span>
      <p local-class='rolesList-text'>
        {{t 'components.project_settings.collaborators.reviewer_text'}}
      </p>

      <span local-class='rolesList-title'>
        {{inline-svg 'assets/machine-translations.svg' local-class='rolesList-icon'}}
        {{t 'general.roles.TRANSLATOR'}}
      </span>
      <p local-class='rolesList-text'>
        {{t 'components.project_settings.collaborators.translator_text'}}
      </p>
    </div>
  </div>
</div>